<template>
    <div class="clear">
        <div class="head">
            <div class="head_left"><van-icon name="arrow-left" @click="back" /></div>
            <div class="head_mid">订单确认</div>
            <div class="head_right"></div>
        </div>
        <div class="clear-box">
            <div class="address" v-if="show">
                <button @click="selectAddress">选择地址</button>
            </div>
            <div class="address" v-else>
                <div class="user">
                    <div class="user-name">
                        <span><van-icon name="user-circle-o" /></span>{{ username }}
                    </div>
                    <div class="user-phone">
                        <span><van-icon name="phone-o" /></span>{{ userphone }}
                    </div>
                </div>
                <div class="user-address">
                    <span><van-icon name="location-o" /></span>{{ useraddress }}
                </div>
                <div class="toggle"><van-icon name="arrow" @click="selectAddress" /></div>
            </div>

            <div class="commodity" v-for="i in arr.res">
                <div class="commodity-img">
                    <img :src="i.product_img" alt="" />
                </div>
                <div class="commodity-message">
                    <div class="commodity-name">
                        <p>
                            {{ i.product_name }}
                        </p>
                    </div>
                    <div class="commodity-content">
                        <div class="commodity-num">x{{ i.product_num }}</div>
                        <div class="commodity-price"><span>¥</span>{{ i.product_price }}</div>
                    </div>
                </div>
            </div>
            <div class="type">
                <div class="type-item">
                    <div class="type-left">配送</div>
                    <div class="type-right">快递运输</div>
                </div>
                <div class="type-item">
                    <div class="type-left">发票</div>
                    <div class="type-right">不开发票</div>
                </div>
                <div class="type-item">
                    <div class="type-left">优惠券</div>
                    <div class="type-right">无可用</div>
                </div>
            </div>
            <div class="type">
                <div class="type-item">
                    <div class="type-left">支付方式</div>
                    <div class="type-right">在线支付</div>
                </div>
            </div>
        </div>
        <div class="foot">
            <div class="foot-price"><span>¥</span>{{ price }}</div>
            <div class="foot-button">
                <button @click="order">立即结算</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref, reactive, onMounted, computed } from "vue";
import { useStore } from "vuex";
import { getOrder, deleteCart, getUserAddress } from "../../request/index.js";
let store = useStore();
let arr = reactive({ res: [] });
let router = useRouter();
let username = ref("xxx");
let userphone = ref("13566666666");
let useraddress = ref("广东省广州市");
let show = ref(true);
//记录总价格
let price = ref("");
//记录所有产品id
let productid = reactive({ res: [] });
//记录用户id
let userid = ref("");
let addressIndex = ref("");

userid.value = localStorage.getItem("user_id");
if (userid.value == undefined) {
    router.go(-1);
}
addressIndex = computed(() => {
    return store.state.myindex.addressindex;
});
// console.log(addressIndex.value.length); //0
if (addressIndex.value.length == 0) {
    show.value = true;
} else {
    show.value = false;
    // console.log(addressIndex.value);
    getUserAddress({ user_id: userid.value }).then((res) => {
        useraddress.value = res.data[addressIndex.value].user_address;
        username.value = res.data[addressIndex.value].user_name;
        userphone.value = res.data[addressIndex.value].user_phone;
    });
}
let selectAddress = () => {
    router.push({
        path: "/address",
    });
};
let back = () => {
    router.go(-1);
};
let order = () => {
    if (arr.res.length == 0 || show.value == true) {
        return;
    }
    for (let i = 0; i < arr.res.length; i++) {
        getOrder({
            user_id: arr.res[i].user_id,
            product_id: arr.res[i].product_id,
            product_img: arr.res[i].product_img,
            product_name: arr.res[i].product_name,
            product_price: arr.res[i].product_price,
            product_num: arr.res[i].product_num,
            user_name: username.value,
            user_phone: userphone.value,
            user_address: useraddress.value,
        }).then((res) => {
            if (res.code == 200) {
                return;
            }
        });
    }
    for (let j = 0; j < productid.res.length; j++) {
        // console.log(productid.res[j]);
        // console.log(userid.value);
        deleteCart({ product_id: productid.res[j], user_id: userid.value }).then((res) => {
            if (res.code == 200) {
                return;
            }
        });
    }
    alert("结算成功");
    router.go(-1);
};
onMounted(() => {
    if (store.state.myindex.arr.length == 0) {
        router.go(-1);
        return;
    }
    arr.res = store.state.myindex.arr;
    if (arr.res.length == 0) {
        router.go(-1);
        return;
    }
    userid.value = arr.res[0].user_id;
    let tol = 0;
    for (let i = 0; i < arr.res.length; i++) {
        tol += arr.res[i].product_price * arr.res[i].product_num;
        // console.log(arr.res[i].product_id)
        productid.res.push(arr.res[i].product_id);
    }
    price.value = tol;
});
</script>

<style lang="scss" scoped>
.clear {
    height: 41.6875rem;
    background-color: #f7f7f7;
    .head {
        background-color: #fff;
        box-shadow: 0 0 5px 1px #e5e5e5;
        height: 3.375rem;
        display: flex;
        .head_left {
            width: 1.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            color: #757575;
        }
        .head_mid {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.125rem;
            color: #757575;
        }
        .head_right {
            width: 1.875rem;
        }
    }
    .clear-box {
        box-sizing: border-box;
        padding: 0 0.625rem;
        height: 36.875rem;
        overflow: auto;
        // background-color: pink;
        .address {
            position: relative;
            margin-top: 0.625rem;
            width: 100%;
            height: 6.25rem;
            border-radius: 0.75rem;
            background-color: rgb(255, 255, 255);
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            span {
                width: 1.875rem;
                text-align: center;
            }
            button {
                width: 6.25rem;
                margin: 0 auto;
                color: #fff;
                box-sizing: border-box;
                padding: 0.625rem 0.625rem;
                border-radius: 0.75rem;
                font-size: 0.75rem;
                background-color: rgb(255, 148, 148);
            }
            .toggle {
                position: absolute;
                right: 0.9375rem;
                color: #ccc;
                font-size: 1.25rem;
            }
        }
        .user {
            color: #717171;
            box-sizing: border-box;
            display: flex;
            font-size: 0.9375rem;
            width: 100%;
            .user-name {
                flex: 1;
                display: flex;
                justify-content: center;
            }
            .user-phone {
                flex: 1;
            }
        }
        .user-address {
            display: flex;
            color: #717171;
            box-sizing: border-box;
            padding-left: 55px;
            // justify-content: center;
        }
        .commodity {
            width: 100%;
            height: 7.5rem;
            background-color: #fff;
            border-radius: 0.75rem;
            margin: 0.9375rem 0;
            display: flex;
            padding: 0.625rem;
            box-sizing: border-box;
        }

        .commodity-img {
            width: 6.25rem;
            background-color: #ccc;
            border-radius: 0.5rem;
            overflow: hidden;
            img {
                width: 100%;
                height: 100%;
            }
        }
        .commodity-message {
            flex: 1;
            box-sizing: border-box;
            padding: 0.625rem;
            display: flex;
            flex-direction: column;
        }
        .commodity-name {
            flex: 1;
            p {
                line-height: 1.25rem;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
            }
            color: #848484;
        }
        .commodity-content {
            color: #ff5154;
            display: flex;
            justify-content: space-between;
            .commodity-price {
                font-size: 1.25rem;
                span {
                    font-size: 0.625rem;
                }
            }
        }
        .type {
            width: 100%;
            background-color: #fff;
            border-radius: 0.75rem;
            padding: 0.625rem 1rem;
            box-sizing: border-box;
            margin: 2.25rem 0;
            .type-item {
                display: flex;
                justify-content: space-between;
                color: #717171;
                font-size: 1rem;
                margin: 1.25rem 0;
                // .type-left {
                // }
                // .type-right {
                // }
            }
        }
    }
    .foot {
        border-radius: 8px 0 0 8px;
        overflow: hidden;
        width: 100%;
        height: 2.8125rem;

        background-color: #f3f3f3;
        box-shadow: 0 0 5px 1px #e5e5e5;
        // background-color: rgb(204, 204, 204, 0.5);
        position: fixed;
        bottom: 0;
        display: flex;
        .foot-price {
            color: #ff4c4c;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.25rem;
            flex: 1;
            span {
                font-size: 0.875rem;
                box-sizing: border-box;
                padding-top: 0.1875rem;
            }
        }
        .foot-button {
            button {
                border-radius: 16px;
                color: white;
                background-color: #ff6f6f;
                height: 100%;
                width: 8.75rem;
            }
        }
    }
}
</style>
